<template>
  <div class="services-container">
    <!-- 搜索和筛选部分 -->
    <div class="search-filter">
      <el-input
        v-model="searchQuery"
        placeholder="搜索服务"
        prefix-icon="el-icon-search"
        class="search-input"
        @input="handleSearch"
      />
      
      <el-select v-model="selectedCategory" placeholder="服务类别" @change="handleFilter">
        <el-option
          v-for="category in categories"
          :key="category.value"
          :label="category.label"
          :value="category.value"
        />
      </el-select>

      <el-select v-model="sortBy" placeholder="排序方式" @change="handleSort">
        <el-option label="价格从低到高" value="price-asc" />
        <el-option label="价格从高到低" value="price-desc" />
        <el-option label="评分从高到低" value="rating-desc" />
      </el-select>
    </div>

    <!-- 服务列表 -->
    <div class="services-grid">
      <el-card v-for="service in filteredServices" :key="service.id" class="service-card">
        <img :src="service.image" class="service-image" :alt="service.title">
        <div class="service-info">
          <h3>{{ service.title }}</h3>
          <p class="service-description">{{ service.description }}</p>
          <div class="service-meta">
            <span class="price">¥{{ service.price }}</span>
            <span class="rating">
              <el-rate
                v-model="service.rating"
                disabled
                show-score
                text-color="#ff9900"
              />
            </span>
          </div>
          <div class="service-tags">
            <el-tag v-for="tag in service.tags" :key="tag" size="small">{{ tag }}</el-tag>
          </div>
          <el-button type="primary" @click="viewServiceDetail(service.id)">查看详情</el-button>
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalServices"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ServicesPage',
  data() {
    return {
      searchQuery: '',
      selectedCategory: '',
      sortBy: '',
      currentPage: 1,
      pageSize: 8,
      categories: [
        { value: 'grooming', label: '宠物美容' },
        { value: 'boarding', label: '宠物寄养' },
        { value: 'training', label: '宠物训练' },
        { value: 'medical', label: '宠物医疗' }
      ],
      services: [
        {
          id: 1,
          title: '专业宠物美容套餐',
          description: '包含洗澡、剪毛、指甲修剪等全方位美容服务',
          price: 199,
          rating: 4.5,
          image: require('@/assets/service1.png'),
          category: 'grooming',
          tags: ['美容', '洗澡', '剪毛']
        },
        {
          id: 2,
          title: '豪华宠物寄养服务',
          description: '24小时专人看护，独立空间，定期运动',
          price: 299,
          rating: 4.8,
          image: require('@/assets/service2.png'),
          category: 'boarding',
          tags: ['寄养', '看护', '运动']
        },
        {
          id: 3,
          title: '基础服从训练课程',
          description: '专业训练师一对一指导，培养基本服从性',
          price: 599,
          rating: 4.6,
          image: require('@/assets/service3.png'),
          category: 'training',
          tags: ['训练', '一对一', '基础']
        },
        {
          id: 4,
          title: '宠物健康体检套餐',
          description: '全面体检，包括常规检查和疫苗接种',
          price: 399,
          rating: 4.7,
          image: require('@/assets/service4.png'),
          category: 'medical',
          tags: ['体检', '疫苗', '健康']
        }
      ]
    }
  },
  computed: {
    filteredServices() {
      let result = [...this.services]
      
      // 搜索过滤
      if (this.searchQuery) {
        result = result.filter(service => 
          service.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          service.description.toLowerCase().includes(this.searchQuery.toLowerCase())
        )
      }
      
      // 类别过滤
      if (this.selectedCategory) {
        result = result.filter(service => service.category === this.selectedCategory)
      }
      
      // 排序
      if (this.sortBy) {
        result.sort((a, b) => {
          switch (this.sortBy) {
            case 'price-asc':
              return a.price - b.price
            case 'price-desc':
              return b.price - a.price
            case 'rating-desc':
              return b.rating - a.rating
            default:
              return 0
          }
        })
      }
      
      return result
    },
    totalServices() {
      return this.filteredServices.length
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    handleFilter() {
      this.currentPage = 1
    },
    handleSort() {
      this.currentPage = 1
    },
    handlePageChange(page) {
      this.currentPage = page
    },
   viewServiceDetail(id) {
    this.$router.push({
      path: `/services/${id}`,
      query: {
        serviceId: id // 传递服务 ID
      }
    });
  }
  }
}
</script>

<style scoped>
.services-container {
  padding-top: 64px;
  max-width: 1200px;
  margin: 0 auto;
}

.search-filter {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.search-input {
  width: 300px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.service-card {
  transition: transform 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.service-info {
  padding: 15px 0;
}

.service-info h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.service-description {
  color: #666;
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 1.4;
}

.service-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.price {
  font-size: 20px;
  color: #f56c6c;
  font-weight: bold;
}

.service-tags {
  margin-bottom: 15px;
}

.service-tags .el-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style> 